<template>
  <div class="my-collection">
    <van-nav-bar
      class="collection-nav"
      title="收藏历史"
      left-arrow
      @click-left="$router.back()"
    />
    <van-tabs
      class="tab-nav"
      v-model="active"
      title-active-color="#3296fa"
      color="#3296fa"
    >
      <van-tab title="我的收藏">
        <van-list
          v-model="loading1"
          :finished="finished1"
          finished-text="没有更多了"
          @load="onLoadColl"
        >
          <div class="art-item"
          v-for="(item, index) in collectionList"
          :key="index"
        >
          <Collection
            :article="item"
          />
        </div>
        </van-list>
      </van-tab>
      <van-tab title="我的历史">
        <van-list
          v-model="loading2"
          :finished="finished2"
          finished-text="没有更多了"
          @load="onLoadHis"
        >
          <div class="my-history"
            v-for="(item, index) in historiesList"
            :key="index"
          >
            <Histories
              :article="item"
            />
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { myCollectArticle, getUserHistories } from '@/api/user'
import Collection from './components/collection'
import Histories from './components/histories'
export default {
  name: 'myCollection',
  components: {
    Collection, Histories
  },
  created () {
    this.loadCollection()
    this.loadHistories()
  },
  data () {
    return {
      active: 0,
      collectionList: [],
      historiesList: [],
      loading1: false,
      loading2: false,
      finished1: false,
      finished2: false,
      hisFlag: [],
      collFlag: []
    }
  },
  methods: {
    async loadCollection () {
      try {
        // 获取收藏列表
        const { data } = await myCollectArticle()
        const { results } = data.data
        this.collectionList.push(...results)
        this.collFlag = results

        // // 获取历史列表
        // const data2 = await getUserHistories()
        // const results2 = data2.data.data.results
        // this.historiesList.push(...results2)
      } catch (err) {
        this.$toast('获取数据失败，稍后重试')
      }
    },
    async loadHistories () {
      try {
        // 获取历史列表
        const { data } = await getUserHistories()
        const { results } = data.data
        this.historiesList.push(...results)
        this.hisFlag = results
      } catch (err) {
        this.$toast('获取数据失败，稍后重试')
      }
    },
    onLoadHis () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.loadHistories()
      // 加载状态结束
      this.loading2 = false
      // 数据全部加载完成
      if (!this.hisFlag.length) {
        this.finished2 = true
      }
    },
    onLoadColl () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.loadCollection()
      // 加载状态结束
      this.loading1 = false
      // 数据全部加载完成
      if (!this.collFlag.length) {
        this.finished1 = true
      }
    }
  }
}
</script>

<style scoped lang="less">
.collection-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.my-collection {
  padding-top: 92px;
  .art-item, .my-history {
    margin-top: 10px;
  }
}
</style>
